<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" 
  xmlns:p="http://primefaces.org/ui" 
  xmlns:h="http://java.sun.com/jsf/html" 
  xmlns:pr="http://java.sun.com/jsf/composite/totororo"
  template="../template_front.xhtml">
  <ui:define name="content">
 	<h1><h:outputText value="Vos commandes"/></h1>
 	<p:dataTable id="orderTable" value="#{orderController.orders}" var="order">
       <p:column>	
           <f:facet name="header" >
               <h:outputText value="N°"/>
           </f:facet>   	       
		  <h:outputText value="Commande n° #{order.id}"/>
       </p:column>       
       <p:column>
           <f:facet name="header" >
               <h:outputText value="Détails de la commande"/>
           </f:facet>
           <h:outputText value='#{order.items["0"].book.title}' style="margin-left:10px" /> 
           <h:outputText value='- #{order.items["0"].book.price} €, ' style="margin-left:10px" /> 
           
           <h:outputText escape="true" value='#{order.items["1"].book.title}' rendered='#{order.items["1"].book.title != null}' />
           <h:outputText value=' - #{order.items["1"].book.price} €, ' rendered='#{order.items["1"].book.title != null}' />
           
           <h:outputText styleClass="line-beak" value='#{order.items["2"].book.title}' rendered='#{order.items["2"].book.title != null}' />
           <h:outputText value=' - #{order.items["2"].book.price} €, ' rendered='#{order.items["2"].book.title != null}' />
           
           <h:outputText  styleClass="line-beak" value='...' rendered='#{order.items["3"].book.title != null}' />
          
       </p:column>      
       <p:column>	
           <f:facet name="header" >
               <h:outputText value="Date"/>
           </f:facet>   	  
           <h:outputText value="#{order.date}" />     
       </p:column>
       
       <p:column>	
           <f:facet name="header" >
               <h:outputText value="Total"/>
           </f:facet>   	  
           <h:outputText value="#{order.total} €" />     
       </p:column>
       
       
       <!-- Paiement -->
       <p:column >	
           <f:facet name="header" >
               <h:outputText value="Statut"/>
           </f:facet>   	  
     
     		<h:form>

	            <p:commandButton value="A Payer" update="bookPopupDialog" oncomplete="paiementDialog.show()" title="View Detail"  rendered="#{order.statutPaiement == 0}">
	            	<f:setPropertyActionListener value="#{order}" target="#{orderController.order}" />
	         	</p:commandButton>	
	         	
	   	  		<p:dialog id="bookPopupDialog" header="Page de paiement" widgetVar="paiementDialog" modal="true" showEffect="fade">
					<p:outputPanel id="paiementDetail" style="text-align:center;" layout="block">
						
			      <h:panelGrid columns="1" rows="2">
			          	
			      	<h:outputLabel for="total" value="Total commande : #{order.total} euros "/>
			    	
			    	<h:outputLabel for="numero" value="Numero carte bancaire"/>
			    	<p:inputMask id="numero" value="#{paiementController.paiement.numero}" required="true" mask="9999-9999-9999-9999"/> 
		
			    		     	
			    	<h:outputLabel for="dateExpirationChamps1" value="Champs 1 Date" />
			    	<p:inputMask id="dateExpirationChamps1" value="#{paiementController.paiement.dateExpirationChamps1}" mask="99"  required="true" />
			
			    	<h:outputLabel for="dateExpirationChamps2" value="Champs 2 Date" />
			    	<p:inputMask id="dateExpirationChamps2" value="#{paiementController.paiement.dateExpirationChamps2}" mask="99"   required="true" />
				     	              
			    	<h:outputLabel for="chiffres" value="Chiffres"/>
			    	<p:inputMask id="chiffres" value="#{paiementController.paiement.chiffres}" required="true" mask="999" />
			    	
			      <p:commandButton action="#{paiementController.createPaiement}" value="Valider le paiement">
			      	<f:setPropertyActionListener value="#{order}" target="#{orderController.order}" />
			      </p:commandButton> 
			      
			      </h:panelGrid>
					</p:outputPanel>
				</p:dialog>	         	
         				
	      		<h:outputText value="Validé" rendered="#{order.statutPaiement == 1}"/>

			</h:form>
			
			
       </p:column>
       <!--  -->
  </p:dataTable>       
  <h:form>
	   <h:commandLink >  
	       <h:outputText value="Exporer les commandes en PDF" />  
	       <p:dataExporter type="pdf" target=":orderTable" fileName="commandes_facture"/>  
	   </h:commandLink>
   </h:form> 
  </ui:define>
</ui:composition>
